<template>
	<view class="ys">
		<y-header></y-header>
		<view class="title">
			{{$t('index.gwc')}}
		</view>
		<view class="goodscart">
			<view class="goosleft">
				<view class="goodsitem row">
					<view class="imgbox">
						<image class="goodslogo" :src="details.cover_path" mode="widthFix"></image>
					</view>
					<view class="goodsinfo">
						<view class="goodstitle">
							{{details.name}}
							<!-- <uni-icons class="icon-del" type="closeempty" :size="18" color="#999"></uni-icons> -->
						</view>
						<view class="sku">
							{{$t('index.mr')}}
						</view>
						<view class="goodsprice">
							<view class="left">
								<view class="price">
									${{details.price}}
								</view>
								<view class="oldprice">
									${{details.market_price}}
								</view>
							</view>
							<!-- <view class="right">
								<view class="cz-num">
									<view class="jian-num" @click="jianNum">
										-
									</view>
									<input type="text" v-model="num" disabled />
									<view class="add-num" @click="addNum">
										+
									</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>
				<view class="goods-bz">
					<view class="bz-title">
						{{$t('index.ddbz')}}
					</view>
					<view class="bz-content">
						<textarea v-model="bzContent" :placeholder="$t('index.txbz')"></textarea>
					</view>
				</view>
				<view class="address">
					<view class="address-title">
						<text class="title-text">{{$t('index.xfdd')}}</text>
						<view @click="chooseXf">
							{{$t('index.xz')}}
							<uni-icons type="right" color="#3b82f6" :size="12"></uni-icons>
						</view>
					</view>
					<view class="address-info">
						<view class="" v-if="renew_order != ''">
							<view class="name">
								{{renew_order.order_no}}
								<view class="phone">
									{{renew_order.pay_amount}}
								</view>
							</view>
							<!-- <view class="address-content">
								{{address.region}} {{address.address}}
							</view> -->
						</view>
						<view class="" v-else>
							{{$t('index.qxzxfdd')}}
						</view>
					</view>
					<view class="chooseBox" v-show="show_xf" @click="closexf">
						<view class="choosebg" @click.stop>
							<view class="choosetitle">
								<view class="left">
									<text>{{$t('index.xzxfdd')}}</text>
								</view>
								<uni-icons @click="closexf" type="closeempty" :size="18" color="#999"></uni-icons>
							</view>
							<view class="choosebody">
								<radio-group name="">
									<label v-for="(o_item,o_index) in orderList" :key="o_index"
										@click="chooseRenew(o_item)">
										<radio :checked="temp.renew_order_id == o_item.id" />
										<view class="orderitem">
											<view class="order-info">
												<view class="item-pay">
													<view class="pay-left">
														<image src="/static/icon/icon-delivery.svg" mode=""></image>
														<text>{{$t('index.ps')}}</text>
													</view>
													<view class="pay-right pc">
														{{$t('index.gmrq')}}：{{o_item.pay_time}}
													</view>
												</view>
												<view class="item-no">
													{{$t('index.gwcbh')}}：{{o_item.order_no}}
												</view>
												<view class="item-num">
													{{$t('index.ddze')}}：<text>${{o_item.pay_amount}}</text>（{{$t('index.hyf')}}）
												</view>
												<view class="item-num">
													{{$t('index.ks')}}：{{o_item.start_time}}
												</view>
												<view class="item-num">
													{{$t('index.js')}}：{{o_item.end_time}}
												</view>
											</view>
										</view>
									</label>
								</radio-group>
							</view>
							<view class="choosefooter">
								<button @click="sureRenew">{{$t('index.qr')}}</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buyinfo">
				<view class="address">
					<view class="address-title">
						<text class="title-text">{{$t('index.psfs')}}</text>
						<view @click="chooseAddress">
							{{$t('index.change')}}
							<uni-icons type="right" color="#3b82f6" :size="12"></uni-icons>
						</view>
					</view>
					<view class="address-info" v-if="send_type == 'pickup'">
						{{$t('index.zt')}}
					</view>
					<view class="address-info" v-else>
						<view class="" v-if="address != ''">
							<view class="name">
								{{address.name}}
								<view class="phone">
									{{address.phone}}
								</view>
							</view>
							<view class="address-content">
								{{address.address}}
							</view>
						</view>
						<view class="" v-else>
							{{$t('index.qxzshdz')}}
						</view>
					</view>
				</view>
				<view class="chooseBox" v-show="show_address" @click="closeAddress">
					<view class="choosebg" @click.stop>
						<view class="choosetitle">
							<view class="left">
								<uni-icons @click="back" v-if="add_Address" type="left" :size="18"
									color="#999"></uni-icons>
								<text v-else>{{$t('index.xzysfs')}}</text>
								<text @click="back" v-if="add_Address">{{$t('index.xzdz')}}</text>
							</view>
							<uni-icons @click="closeAddress" type="closeempty" :size="18" color="#999"></uni-icons>
						</view>
						<view class="choosebody" v-show="!add_Address">
							<radio-group name="" @change="changeRadio">
								<label>
									<radio :checked="temp.send_type =='pickup' " value="pickup" />
									<view class="chooseitem">
										<view class="item-title">
											{{$t('index.zt')}}
											<text>{{$t('index.my')}}</text>
										</view>
										<!-- <view class="item-tips">
											自提(免运)
										</view> -->
									</view>
								</label>
								<label>
									<radio :checked="temp.send_type =='delivery' " value="delivery" />
									<view class="chooseitem">
										<view class="item-title">
											{{$t('index.ps')}}
											<text>{{$t('index.my')}}</text>
										</view>
										<!-- <view class="item-tips">
											(免运)
										</view> -->
										<view class="item-list" v-show="temp.send_type =='delivery'">
											<view class="addresslist">
												<view
													:class="temp.address.id == item.id ?'address-item active':'address-item'"
													v-for="(item,index) in addressList" :key="index"
													@click="chooseAddressItem(item)">
													<view class="item-top">
														<view class="item-dz">
															{{item.address}}
														</view>
														<text @click="editAddress(item)">{{$t('index.bj')}}</text>
													</view>
													<view class="item-info">
														{{item.name}} {{item.phone}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</label>
							</radio-group>
						</view>
						<view class="addbody" v-if="add_Address">
							<y-address @cancle="cancle" @sure="sure" :item="addItem"></y-address>
						</view>
						<view class="choosefooter" v-show="!add_Address">
							<text @click="newAddress">{{$t('index.xzdz')}}</text>
							<button @click="sureAddress">{{$t('index.qr')}}</button>
						</view>
					</view>
				</view>
				<view class="address">
					<view class="address-title">
						<text class="title-text">{{$t('index.xjmx')}}</text>
					</view>
					<view class="mxlist">
						<view class="mxitem">
							<text>{{user.level_name}}</text>
						</view>
						<view class="mxitem">
							<text>{{$t('index.spje')}}</text>
							<text class="mxnum">${{gooods_amount}}</text>
						</view>
						<view class="mxitem">
							<text>{{$t('index.youf')}}</text>
							<text class="mxnum">${{details.postage}}</text>
						</view>
						<view class="mxitem">
							<text>{{$t('index.hdzk')}}</text>
							<text class="mxnum">-${{discount}}</text>
						</view>
					</view>
					<view class="pay">
						<text>{{$t('index.xj')}}</text>
						<text class="paynum">${{pay_amount}}</text>
					</view>
					<view class="address-title">
						<text class="title-text">{{$t('index.zffs')}}</text>
					</view>
					<view class="mxlist">
						<uni-data-checkbox v-model="pay_type" :localdata="payRange"></uni-data-checkbox>
					</view>
					<view class="tips">
						<label @click="changeAgree">
							<checkbox :checked="is_agree" />
							<view class="xieyi">
								{{$t('index.ydbty')}}<text
									@click="toPage('/pages/user/about?type=shop')">{{$t('index.gwxz')}}</text>
							</view>
						</label>
					</view>
				</view>

			</view>
		</view>
		<view class="buybtn">
			<view class="buyfooter">
				<view class="left">
					{{$t('index.xj')}}<text>${{pay_amount}}</text>
				</view>
				<view class="right">
					<button @click="payNow" :disabled="loading" :loading="loading">{{$t('index.ljjz')}}</button>
				</view>
			</view>
		</view>
		<y-form :showModel="showModel" @cancelForm="cancel" @sureForm="sureForm"></y-form>
	</view>
</template>

<script>
	import {
		detail
	} from "@/api/goods.js"
	import {
		AddressList,
		UserInfo,
		buyNow,
		getRenewOrder
	} from "@/api/user.js"
	export default {
		data() {
			return {
				loading: false,
				showModel: false,
				user: '',
				bzContent: '', //订单备注
				details: '',
				address: '',
				show_address: false, //选择配送方式
				send_type: 'delivery', // 运送方式
				add_Address: false, //是否新增地址
				addressList: [],
				addItem: '',
				goods_id: '',
				num: '',
				discount: 0,
				choose_address: {},
				temp: {
					send_type: 'pickup',
					address: '',
					renew_order_id: ''
				},
				show_xf: false,
				orderList: [], //带续费列表
				renew_order: '',
				is_agree: false,
				pay_type: 10,
				payRange: [{
					value: 10,
					text: this.$t('index.xjzf')
				}, {
					value: 40,
					text: this.$t('index.bdjf')
				}],
			}
		},
		onLoad(e) {
			if (e.id) {
				this.goods_id = e.id
				this.detail()
			}
			this.num = e.num || 1
			this.AddressList()
			this.userInfo()
			this.getRenewOrder()
		},
		computed: {
			gooods_amount() {
				if (this.details) {
					return (Number(this.details.price) * Number(this.num)).toFixed(2)
				} else {
					return "0.00"
				}
			},
			pay_amount() {
				if (this.details) {
					return (Number(this.gooods_amount) + Number(this.details.postage) - Number(this.discount)).toFixed(2)
				}
				return "0.00"
			},
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			chooseXf() {
				this.show_xf = true
			},
			closexf() {
				this.show_xf = false
			},
			getRenewOrder() {
				getRenewOrder().then(res => {
					if (res.code == 0) {
						this.orderList = res.data
					}
				})
			},
			userInfo() {
				UserInfo().then(res => {
					this.user = res.data.user
				})
			},
			detail() {
				detail({
					id: this.goods_id
				}).then(res => {
					if (res.code == 0) {
						this.details = res.data
						this.details.num = 1
					}
				})
			},
			cancel() {
				this.loading = false
				this.showModel = false
			},
			sureForm(param) {
				this.showModel = false

				let goodsData = [{
					goods_id: this.goods_id,
					num: this.num,
				}];
				buyNow({
					send_type: this.send_type,
					address_id: this.address.id,
					goodsData: goodsData,
					renew_id: this.renew_order.id,
					password: param,
					pay_type: this.pay_type
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/pay/finish?order=' + res.data.order_no
							})
						}, 500)
					} else if (res.code == 10) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/setpayword'
							})
						}, 500)
					} else {
						this.loading = false
					}
				})
			},
			changeAgree(e) {
				this.is_agree = !this.is_agree
			},
			//立即支付
			payNow() {
				if (!this.is_agree) {
					uni.$showMsg(this.$t('index.ydxz'))
					return
				}
				this.loading = true
				this.showModel = true
				return false
			},
			AddressList() {
				AddressList().then(res => {
					if (res.code == 0) {
						this.addressList = res.data
						if (this.addressList.length > 0) {
							this.address = this.addressList[0]
							this.temp.address = this.addressList[0]
						}
					}
				})
			},
			//编辑地址
			editAddress(item) {
				this.addItem = item
				this.add_Address = true
			},
			//确认新增地址
			sure(e) {
				this.add_Address = false
				let i = this.addressList.findIndex(item => item.id == e.id)
				if (i < 0) {
					this.addressList.push(e)
				} else {
					this.addressList[i] = e
				}
			},
			//取消新增地址
			cancle() {
				this.add_Address = false
			},
			//关闭运送方式
			closeAddress() {
				this.show_address = false
				this.add_Address = false
			},
			//确认运送方式
			sureAddress() {
				if (this.temp.send_type == 'delivery') {
					if (!this.temp.address) {
						return uni.$showMsg(this.$t('index.qxzshdz'))
					}
					this.address = this.temp.address
				}
				this.send_type = this.temp.send_type
				this.show_address = false
			},
			//从新增地址返回
			back() {
				this.add_Address = false

			},
			//显示新增地址组件
			newAddress() {
				this.add_Address = true
				this.addItem = ''
			},
			//地址列表 选择地址
			chooseAddressItem(item) {
				this.temp.address = item
			},
			//选择运送方式
			changeRadio(e) {
				// this.send_type = e.detail.value
				this.temp.send_type = e.detail.value
			},
			//打开运送方式
			chooseAddress() {
				this.temp.send_type = this.send_type
				this.temp.address = this.address
				this.show_address = true
			},
			jianNum() {
				if (this.num > 1) {
					this.num--
				}
			},
			addNum() {
				// uni.$showMsg('暂不支持')
				// return false
				this.num++
			},
			chooseRenew(item) {
				if (this.temp.renew_order_id == item.id) {
					console.log(1);
					this.temp.renew_order_id = ''
				} else {
					console.log(2);
					this.temp.renew_order_id = item.id
				}
				console.log(this.temp.renew_order_id);
			},
			//确认续费订单
			sureRenew() {
				let index = this.orderList.findIndex(item => item.id == this.temp.renew_order_id)
				console.log(index, this.temp.renew_order_id);
				if (index >= 0) {
					this.renew_order = this.orderList[index]
				} else {
					this.renew_order = ''
				}
				console.log(this.renew_order);
				this.show_xf = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
		padding-bottom: 80px;
	}

	.orderitem {
		background: #ffffff;
		border: 1px solid #d8d8d8;
		border-radius: 5px;
		padding: 20px 0;
		font-family: PingFang-TC;
		flex: 1;

		.order-info {
			.item-pay {
				padding: 0px 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15px;

				.pay-left {
					display: flex;
					align-items: center;
					font-size: 12px;

					.line {
						background: #d8d8d8;
						width: 1px;
						height: 15px;
						margin: 0 15px;
					}

					image {
						margin-right: 6px;
						height: 20px;
						width: 20px;
					}
				}

				.pay-right {
					color: #999999;
					font-size: 15px;
					font-family: "PingFang TC";
				}
			}

			.item-no {
				display: flex;
				margin-bottom: 8px;
				font-size: 15px;
				font-family: PingFang-TC;
				line-height: 16px;
				font-weight: 400;
				color: #000000;
				flex-wrap: wrap;
				padding: 0px 15px;
				align-items: center;
			}

			.item-num {
				display: flex;
				margin-bottom: 15px;
				font-size: 15px;
				font-family: PingFang-TC;
				line-height: 16px;
				font-weight: 400;
				color: #000000;
				flex-wrap: wrap;
				padding: 0px 15px;
				align-items: center;

				text {
					color: #ff5353;
				}
			}

			.item-cz {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 5px 0px;
				padding: 0px 15px 6px;
				color: #428bca;
				font-size: 15px;

				view {
					cursor: pointer;
				}
			}

			.item-type {
				padding: 0px 15px;
				margin: 5px 0;

				text {
					border-radius: 4.5px;
					font-size: 14px;
					text-align: center;
					box-sizing: border-box;
					display: inline-block;
					background-color: #ffffff;
					cursor: pointer;
					border: 1px solid #999999;
					width: 131px;
					height: 30px;
					line-height: 28px;
					color: #999999;
				}
			}


		}

		.order-goods {
			border-top: 1px solid #dddddd;

			.goods-type {
				padding: 5px 15px;
				background-color: rgb(243, 250, 255);
				display: flex;
				justify-content: flex-start;
				align-items: center;
				box-sizing: border-box;
				font-size: 14px;
				height: 37px;
			}
		}



		.goodsinfo {
			padding: 16px 15px;
			display: flex;
			margin-bottom: 10px;

			.imgbox {
				width: 100px;
				height: 100px;
				margin-right: 15px;
				display: block;

				image {
					width: 100%;
				}
			}

			.goodsname {
				width: calc(100% - 115px);

				.name {
					font-size: 15px;
					line-height: 18px;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					min-height: 18px;
					margin-bottom: 4px;
				}

				.goodsprice {
					margin-top: 4px;
					line-height: 20px;
					font-size: 15px;
					color: #ff5353;
				}

				.goods-status {
					margin: 10px 0px;
					display: flex;
					font-size: 15px;
					flex-direction: column;
				}
			}
		}
	}

	.buybtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		box-shadow: -1px 0 15px #eee;

		.buyfooter {
			display: flex;
			position: relative;
			-webkit-box-align: center;
			align-items: center;
			line-height: 1.5;
			box-sizing: border-box;
			z-index: 1;
			max-width: 1180px;
			margin: auto;
			-webkit-box-pack: end;
			justify-content: space-between;
			font-size: 16px;
			padding: 16px 10px;
			height: auto;
			width: 100%;

			.left {
				display: flex;
				align-items: center;
				font-size: 14px;

				text {
					color: #ff2020;
					font-weight: bold;
					font-size: 18px;
					margin-left: 3px;
				}
			}

			button {
				background-color: #ff2020;
				border: 1px solid #ff5353;
				color: #fff;
				font-size: 16px;
				padding: 0px 16px;
				height: 44px;
				line-height: 44px;
				box-sizing: border-box;
				width: 300px;
			}
		}
	}

	.title {
		max-width: 1180px;
		margin: 10px auto;
		padding: 10px;
		font-weight: bold;
		font-size: 20px;
	}

	.chooseBox {
		width: 100%;
		height: 100vh;
		background: #00000080;
		top: 0;
		left: 0;
		position: fixed;
		z-index: 999;

		.choosebg {
			background: #f8f8f8;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 96%;
			max-width: 768px;
			padding: 16px 24px;
			box-sizing: border-box;
			border-radius: 10px;
		}

		.choosetitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 20px;

			.left {
				cursor: pointer;
			}

			text {
				margin-right: 5px;
			}
		}

		.choosebody {
			height: 40vh;
			overflow-y: scroll;
			margin-top: 20px;

			&::-webkit-scrollbar {
				display: none;
			}

			label {
				background: #fff;
				display: flex;
				padding: 16px 20px;
				border-radius: 8px;
				cursor: pointer;
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 15px;
				align-items: flex-start;

				radio {
					transform: scale(.8);
				}

				.item-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;

					text {
						color: #ff5353;
					}
				}

				.item-tips {
					color: #999;
					font-size: 14px;
					margin-top: 8px;
				}

				.chooseitem {
					width: calc(100% - 24px);
					padding-left: 10px;
					box-sizing: border-box;
				}

				.item-list {
					width: 100%;

					.addresslist {
						width: 100%;

						.address-item {
							border: 1px solid #eee;
							padding: 10px;
							border-radius: 5px;
							margin-top: 10px;
							box-sizing: border-box;
							width: 100%;

							&.active {
								border-color: #7ebae3;
								background: #ecf5fc;
							}
						}

						.item-top {
							display: flex;
							font-size: 14px;
							justify-content: space-between;
						}

						.item-dz {
							width: 50%;
							padding-right: 10px;
							box-sizing: border-box;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.item-info {
							font-size: 12px;
							margin-top: 5px;
						}

						text {
							display: block;
							width: 30px;
							color: #3b82f6;
						}
					}
				}
			}
		}

		.addbody {
			max-height: 80vh;
			overflow-y: scroll;
		}

		.choosefooter {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #595e68;
			padding-top: 20px;

			text {
				cursor: pointer;
			}

			button {
				font-size: 16px;
				height: 40px;
				line-height: 40px;
				background: #ff5353;
				width: 80px;
				color: #fff;
				margin: 0;
				margin-left: 20px;
			}
		}
	}

	.address {
		background: #fff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-color: rgb(229, 231, 232);
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;

		.address-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #3b82f6;
			font-size: 14px;

			.title-text {
				font-weight: bold;
				font-size: 18px;
				color: #000;
			}
		}

		.address-info {
			margin-top: 10px;

			.name {
				display: flex;
				align-items: center;
				font-size: 17px;

				.phone {
					margin-left: 5px;
					font-size: 14px;
					color: #999;
				}
			}

			.address-content {
				margin-top: 5px;
				font-size: 14px;
			}
		}

		.mxlist {
			margin-top: 10px;

			.mxitem {
				font-size: 15px;
				margin-bottom: 5px;
				display: flex;
				justify-content: space-between;

				.mxnum {
					font-weight: bold;
				}
			}
		}

		.pay {
			border-top: 1px solid #eee;
			margin-top: 10px;
			padding: 10px 0;
			display: flex;
			justify-content: space-between;

			.paynum {
				font-weight: bold;
				color: #ff5353;
				font-size: 18px;
				letter-spacing: .5px;
			}
		}
	}

	.goodscart {
		max-width: 1180px;
		margin: 0px auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 5px 10px;

		.buyinfo {
			width: 35%;
		}

		.goosleft {
			width: 63%;
		}

		.goodsitem {
			width: 100%;
		}
	}

	.goods-bz {
		background: #fff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-color: rgb(229, 231, 232);
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;

		.bz-title {
			font-weight: bold;
			font-size: 18px;
			color: #000;
		}

		textarea {
			width: 100%;
			min-height: 30px;
			border: 1px solid #eee;
			padding: 10px;
			border-radius: 5px;
			margin-top: 10px;
			box-sizing: border-box;
		}

	}

	.goodsitem {
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 20px;
		transition: .2s all;
		border-radius: 5px;
		background: #fff;

		&:hover {
			transform: scale(1.02);
			box-shadow: 0 0 10px #ccc;
		}

		.imgbox {
			position: relative;

			.no_stock {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #ffffffbf;
				z-index: 9;

				text {
					background: #000;
					color: #fff;
					border-radius: 20px;
					padding: 5px 10px;
					font-size: 15px;
				}
			}
		}

		.goodslogo {
			width: 100%;
		}

		.goodsinfo {
			box-sizing: border-box;
			background: #fff;

			.goodstitle {
				box-sizing: border-box;
				margin-bottom: 4px;
				height: 36px;
				overflow: hidden;
				font-weight: normal;
				font-size: 14px;
				color: rgb(0, 0, 0);
				line-height: 18px;
				text-overflow: ellipsis;
				white-space: normal;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				padding-right: 20px;
				box-sizing: border-box;
				position: relative;

				.icon-del {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.sku {
				font-size: 14px;
				color: #666;
			}

			.oldprice {
				color: rgb(170, 170, 170);
				text-decoration: line-through;
				font-size: 14px;
				margin-top: 5px;
			}

			.goodsprice {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.price {
					color: rgb(255, 83, 83);
					font-weight: unset;
					font-size: 18px;
					font-weight: bold;
					margin-top: 10px;
				}

				.goods_cz {
					width: 50px;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

				.right {
					margin-top: 10px;
					display: flex;
					width: 100px;

					.cz-num {
						border: 1px solid #DDD;
						border-radius: 4px;
						display: flex;
						width: 100%;
						max-width: 200px;
						height: 30px;
						text-align: center;
						align-items: center;

						.jian-num,
						.add-num {
							display: flex;
							justify-content: center;
							align-items: center;
							cursor: pointer;
							font-size: 22px;
							line-height: 30px;
							width: 30px;
						}

						input {
							height: 30px;
							line-height: 30px;
							flex: 1;
							font-size: 14px;
							border-left: 1px solid #DDD;
							border-right: 1px solid #DDD;

						}
					}
				}
			}
		}

		&.row {
			display: flex;

			&:hover {
				transform: scale(1.00);
				box-shadow: 0 0 0 0;
			}

			.imgbox {
				width: 120px;
				height: 120px;
			}

			.goodsinfo {
				// width: calc(100% - 120px);
				flex: 1;
				padding-left: 10px;
				box-sizing: border-box;
				position: relative;

				.goods_cz {
					position: absolute;
					bottom: 0;
					right: 0;

					text {
						font-size: 22px;
					}
				}
			}
		}
	}

	.tips {
		color: #606060;
		margin: 15px 0px;
		font-size: 13px;
		line-height: 16px;
		padding: 0 10px;

		label {
			display: flex;
			align-items: flex-start;
			background: #fffbeb;
			// padding: 10px 12px;
			line-height: 3.5;

			checkbox {
				transform: scale(.7);
			}

			text {
				color: #428bca;
			}
		}
	}

	@media (max-width:768px) {
		.goodscart {
			flex-direction: column;
			padding-bottom: 85px;

			.goosleft {
				width: 100%;
			}

			.buyinfo {
				width: 100%;
			}
		}

		.buybtn {
			.buyfooter {
				flex-direction: column;
				align-items: flex-start;
				padding: 10px;

				.right {
					width: 100%;
					margin-top: 5px;
				}

				button {
					width: 100%;
				}
			}
		}

		.chooseBox {
			.choosebg {
				top: unset;
				bottom: 0;
				left: 0;
				width: 100%;
				transform: translate(0);
				padding: 16px 10px;
			}

			.choosebody {
				label {
					padding: 16px 10px;
				}
			}
		}
	}
</style>